<template>
    <section class="main">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-finished"></i>工作项管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="plugins-tips" style="height: 30px">
                <span style="margin-left: 20px; font-size: 16px">项目名称：项目管理申报系统</span>
                <!--                新建项目-->
                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        class="handle-del mr10"
                        style="float: right;margin-right: 40px;margin-bottom: 10px"
                        @click="isAddProject=true"
                        v-if="!isdelectSelect"
                >新建工作项
                </el-button>
                <el-button
                        v-if="!isdelectSelect && ifDelect"
                        type="primary"
                        icon="el-icon-edit"
                        class="handle-del mr10"
                        style="float: right;margin-right: 40px;margin-bottom: 10px"
                        @click="isdelectSelect =true"
                >删除工作项
                </el-button>
                <el-button
                        v-if="isdelectSelect"
                        type="primary"
                        icon="el-icon-edit"
                        class="handle-del mr10"
                        style="float: right;margin-right: 40px;margin-bottom: 10px"
                        @click="delectSelectWorkItem"
                >确认删除
                </el-button>
                <el-checkbox style="float: right;margin-right: 40px;margin-bottom: 10px" v-if="isdelectSelect" @change="handleCheckAllChange" v-model="isSelectAll">
                    全选
                </el-checkbox>
                <el-dialog title="添加工作项" :visible.sync="isAddProject">
                    <el-form :model="form" style="padding-left: 40px">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="工作项名称">
                                    <el-input v-model="form.missionTitle"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" style="margin-left: 74px">
                                <el-form-item label="工作项负责人">
                                    <el-input v-model="form.missionManager"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <p class="demonstration">工作项重要程度</p>
                                <el-select v-model="form.missionPriority" value-key="value" style="width: 84%">
                                    <el-option :label="item.value" v-for="(item) in workItemImportant" :key="item.value"
                                               :value="item.id"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="10">
                                <p class="demonstration">工作项类别</p>
                                <el-select v-model="form.missionType" value-key="value" style="width: 100%">
                                    <el-option :label="item.value" v-for="(item) in workItemSort" :key="item.value"
                                               :value="item.id"></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 20px;margin-bottom: 10px">
                            <p class="demonstration" style="margin-right: 46px">项目起止时间</p>
                            <el-date-picker
                                    style="width: 92%"
                                    v-model="form.value6"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-row>
                        <el-form-item label="工作项内容">
                            <el-input type="textarea" style="width: 92%" v-model="form.missionContent"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="isAddProject = false">取 消</el-button>
                        <el-button type="primary" @click="addWorkItem">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <el-row class="drag-box">
                <el-col :span="8">
                    <div class="drag-box-item">
                        <div class="item-title">需求</div>
                        <draggable  v-model="demand" @remove="removeHandle" :options="dragOptions">
                            <transition-group tag="div" id="需求" class="item-ul">
                                <div v-for="item in demand" class="drag-list" :key="item.missionId">
                                    <div @click="WorkItemShow(item)">
                                        {{item.missionTitle}}
                                        <el-tag type="info" style="margin-left: 22px; float: right" v-if="item.missionStatus === 0 && !isdelectSelect">
                                            未开始
                                        </el-tag>
                                        <el-tag style="margin-left: 22px; float: right" v-if="item.missionStatus === 1 && !isdelectSelect">
                                            进行中
                                        </el-tag>
                                        <el-tag style="margin-left: 22px; float: right" type="success" v-if="item.missionStatus === 2 && !isdelectSelect">
                                            已完成
                                        </el-tag>
                                    </div>
                                    <el-checkbox @change="change(item)" style="margin-right: 12px; float: right; margin-top: -23px;" v-if="isdelectSelect" v-model="item.isdelect" ></el-checkbox>
                                </div>
                            </transition-group>
                        </draggable>
                        <el-dialog title="工作项详情" :visible.sync="isWorkItemShow">
                            <el-form  :disabled="isChange" :model="form" style="padding-left: 40px">
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item label="工作项剩余时间为" style="margin-top: 16px;margin-left: 10%">
                                            <el-input v-model="form.restTime"
                                                      style="width: 30%; margin-right: 10px "></el-input>
                                            天
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10" style="margin-left: 74px">
                                        <p class="demonstration">工作项状态</p>
                                        <el-select v-model="form.missionStatus" value-key="value" style="width: 100%">
                                            <el-option :label="item.value" v-for="(item) in missionStatus"
                                                       :key="item.value" :value="item.id"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item label="工作项名称">
                                            <el-input v-model="form.missionTitle"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10" style="margin-left: 74px">
                                        <el-form-item label="工作项负责人">
                                            <el-input v-model="form.missionManager"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <p class="demonstration">工作项重要程度</p>
                                        <el-select v-model="form.missionPriority" value-key="value" style="width: 84%">
                                            <el-option :label="item.value" v-for="(item) in workItemImportant"
                                                       :key="item.value" :value="item.id"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="10">
                                        <p class="demonstration">工作项类别</p>
                                        <el-select v-model="form.missionType" value-key="value" style="width: 100%">
                                            <el-option :label="item.value" v-for="(item) in workItemSort"
                                                       :key="item.value" :value="item.id"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top: 20px;margin-bottom: 10px">
                                    <p class="demonstration" style="margin-right: 46px">项目起止时间</p>
                                        <el-col :span="11">
                                            <el-date-picker type="date" :placeholder="`开始日期${this.form.startTime}`" v-model="form.startTime" style="width: 100%;"></el-date-picker>
                                        </el-col>
                                        <el-col class="line" style="width: 1.16667%">-</el-col>
                                        <el-col :span="11">
                                            <el-date-picker type="date" :placeholder="`截止日期${this.form.finishTime}`" v-model="form.finishTime" style="width: 100%;"></el-date-picker>
                                        </el-col>
                                </el-row>
                                <el-form-item label="工作项内容">
                                    <el-input type="textarea" style="width: 92%"
                                              v-model="form.missionContent"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="isWorkItemShow = false">取 消</el-button>
                                <el-button type="danger" plain @click="deleteWorkItem">删除工作项</el-button>
                                <el-button type="primary" v-if="isChange" @click="isChange=false">编 辑</el-button>
                                <el-button type="primary"v-if="!isChange"  @click="updateWorkItem">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="drag-box-item">
                        <div class="item-title">缺陷</div>
                        <draggable v-model=" defect " @remove="removeHandle" :options="dragOptions">
                            <transition-group tag="div" id="缺陷" class="item-ul">
                                <div v-for="item in  defect " class="drag-list" :key="item.missionId">
                                    <div @click="WorkItemShow(item)">
                                        {{item.missionTitle}}
                                        <el-tag type="info" style="margin-left: 22px; float: right" v-if="item.missionStatus === 0 && !isdelectSelect">
                                            未开始
                                        </el-tag>
                                        <el-tag style="margin-left: 22px; float: right" v-if="item.missionStatus === 1 && !isdelectSelect">
                                            进行中
                                        </el-tag>
                                        <el-tag style="margin-left: 22px; float: right" type="success" v-if="item.missionStatus === 2 && !isdelectSelect">
                                            已完成
                                        </el-tag>
                                    </div>
                                    <el-checkbox @change="change(item)" style="margin-right: 12px; float: right; margin-top: -23px;" v-if="isdelectSelect" v-model="item.isdelect"  ></el-checkbox>
                                </div>
                            </transition-group>
                        </draggable>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="drag-box-item">
                        <div class="item-title">任务</div>
                        <draggable v-model="task" @remove="removeHandle" :options="dragOptions">
                            <transition-group tag="div" id="任务" class="item-ul">
                                <div v-for="item in task" class="drag-list" :key="item.missionId">
                                    <div @click="WorkItemShow(item)">
                                        {{item.missionTitle}}
                                        <el-tag type="info" style="margin-left: 22px; float: right" v-if="item.missionStatus === 0 && !isdelectSelect">
                                            未开始
                                        </el-tag>
                                        <el-tag style="margin-left: 22px; float: right" v-if="item.missionStatus === 1 && !isdelectSelect">
                                            进行中
                                        </el-tag>
                                        <el-tag style="margin-left: 22px; float: right" type="success" v-if="item.missionStatus === 2 && !isdelectSelect">
                                            已完成
                                        </el-tag>
                                    </div>
                                    <el-checkbox @change="change(item)" style="margin-right: 12px; float: right; margin-top: -23px;" v-if="isdelectSelect" v-model="item.isdelect" ></el-checkbox>
                                </div>
                            </transition-group>
                        </draggable>
                    </div>
                </el-col>
            </el-row>
        </div>
    </section>
</template>

<script>
  import draggable from 'vuedraggable'
  import {Message} from 'element-ui'
  import qs from 'qs'
  export default {
    name: 'draglist',
    data() {
      return {
        ifDelect:true,
        isSelectAll:false,
        list:[],
        isdelectSelect:false,
        isChange:true,
        isWorkItemShow: false,
        workItemImportant: [
          {value: '普通', id: '0'},
          {value: '比较重要', id: '10'},
          {value: '非常重要', id: '100'}
        ],
        workItemSort: [
          {value: '需求', id: '1'},
          {value: '缺陷', id: '2'},
          {value: '任务', id: '3'}
        ],
        missionStatus: [
          {value: '未开始', id: '0'},
          {value: '进行中', id: '1'},
          {value: '已完成', id: '2'}
        ],
        form: [],
        isAddProject: false,
        dragOptions: {
          animation: 120,
          scroll: true,
          group: 'sortlist',
          ghostClass: 'ghost-style'
        },
        demand: [],
        defect : [],
        task: []
      }
    },
    components: {
      draggable
    },
    methods: {
      change(e){
        e.isDelect=e.isdelect;
        console.log(e.isDelect);
      },
      //全选
      handleCheckAllChange() {
        let change =this.isSelectAll;
        this.demand.map(function (item) {
          item.isDelect=change;
          item.isdelect=change;
        });
        this.defect.map(function (item) {
          item.isDelect=change;
          item.isdelect=change;
        });
        this.task.map(function (item) {
          item.isDelect=change;
          item.isdelect=change;
        });
      },
      //删除某一项目的选中工作项
      async delectSelectWorkItem(){
        console.log(this.list);
        let delectlist =[];
        if (this.isSelectAll===true){
          this.list.map(function (item) {
              delectlist.push(item.missionId)
          })
        }else {
          await this.list.map(function (item) {
            if (item.isDelect===true){
              delectlist.push(item.missionId);
            }
          });
          delectlist.map(function (item) {
            delete item.isDelect;
            delete item.isdelect;
          });
        }
        console.log(delectlist);
        this.$http.delete('/mission/remove/list',{
          params:{
            missionId:delectlist
          },
          paramsSerializer: params => {
            return qs.stringify(params, { indices: false })
          }
        }).then( res => {
          Message.success('删除成功');
          this.isdelectSelect = !this.isdelectSelect;
          this.getData();
        });
      },
      //删除项目工作项
      deleteWorkItem(){
        this.$http.delete('/mission/remove',{
          missionId:this.form.missionId,
        }).then( res => {
          this.isWorkItemShow = false;
          Message.success('删除成功');
          this.getData();
        })
      },
      //转换格式
      missionType(v, m) {
        if (m === 1)
        switch (v) {
          case 1: return "需求";
          case 2: return "缺陷";
          case 3: return "任务";
        } else {
          switch (v) {
            case '需求': return 1;
            case '缺陷': return 2;
            case '任务': return 3;
          }
        }
      },
      missionPriority(v,m){
        if (m === 1)
          switch (v) {
            case 0: return "普通";
            case 10: return "重要";
            case 100: return "非常重要";
          } else {
          switch (v) {
            case '普通': return 0;
            case '重要': return 10;
            case '非常重要': return 100;
          }
        }
      },
      convertMissionStatus(v,m){
        if (m === 1)
          switch (v) {
            case 0: return "未开始";
            case 1: return "进行中";
            case 2: return "已完成";
          } else {
          switch (v) {
            case '未开始': return 0;
            case '进行中': return 1;
            case '已完成': return 2;
          }
        }
      },
      //日期格式统一化
      dateChange(data){
        let dataMounth,dataDate;
        if (data.getMonth()<10){
          dataMounth=data.getMonth()+1;
          dataMounth="0"+dataMounth
        }else {
          dataMounth=data.getMonth()
        }
        if (data.getDate()<10){
          dataDate="0"+data.getDate()
        }else {
          dataDate=data.getDate()
        }
        data =data.getFullYear()+"-"+dataMounth+'-'+dataDate;
        return data;
      },

      //修改工作项
      updateWorkItem(){
        if(this.form.startTime.length<15){
          this.form.startTime=this.form.startTime+'T02:05:03.780Z';
        }else if(this.form.startTime.length===undefined){
          this.form.startTime=this.dateChange(this.form.startTime)+'T02:05:03.780Z';
        }
        if (this.form.finishTime.length<15){
          this.form.finishTime=this.form.finishTime+'T02:05:03.780Z';
        }else if(this.form.finishTime.length===undefined) {
          this.form.finishTime=this.dateChange(this.form.finishTime)+'T02:05:03.780Z'
        }
        if(isNaN(this.form.missionType)){
        this.form.missionType = this.missionType(this.form.missionType,0);}
        if(isNaN(this.form.missionPriority)){
        this.form.missionPriority = this.missionPriority(this.form.missionPriority,0);}
        if(isNaN(this.form.missionStatus)){
          this.form.missionStatus = this.convertMissionStatus(this.form.missionStatus,0);
        }
        this.$http.put('/mission/change',{
          finishTime:this.form.finishTime,
          missionContent:this.form.missionContent,
          missionId:this.form.missionId,
          missionManager:this.form.missionManager,
          missionPriority:this.form.missionPriority,
          missionTitle:this.form.missionTitle,
          missionType:this.form.missionType,
          startTime:this.form.startTime,
          missionStatus:this.form.missionStatus
        }).then( res => {
          this.isWorkItemShow = false;
          Message.success('修改成功');
          this.getData();
        })
      },

      //展示工作项详细信息
      WorkItemShow(e) {
        this.isChange=true;
        e.missionType = this.missionType(e.missionType,1);
        e.missionPriority = this.missionPriority(e.missionPriority,1);
        e.missionStatus = this.convertMissionStatus(e.missionStatus,1);
        this.form = e;
        this.isWorkItemShow = true;
      },
      //时间统一
      dateChange(data) {
        let dataMounth, dataDate;
        if (data.getMonth() < 10) {
          dataMounth = data.getMonth() + 1;
          dataMounth = "0" + dataMounth
        } else {
          dataMounth = data.getMonth()
        }
        if (data.getDate() < 10) {
          dataDate = "0" + data.getDate()
        } else {
          dataDate = data.getDate()
        }
        data = data.getFullYear() + "-" + dataMounth + '-' + dataDate;
        return data;
      },
      //新建工作项
      addWorkItem() {
        console.log(this.form);
        this.$http.post('/mission/post', {
          finishTime: this.dateChange(this.form.value6[1]) + 'T11:17:25.102Z',
          startTime: this.dateChange(this.form.value6[0]) + 'T11:17:25.102Z',
          missionContent: this.form.missionContent,
          missionManager: this.form.missionManager,
          missionPriority: this.form.missionPriority,
          missionProject: this.$router.currentRoute.query.projectId,
          missionTitle: this.form.missionTitle,
          missionType: this.form.missionType,
        }).then(res => {
          Message.success('新建了一个工作项');
          this.isAddProject = false;
          this.getData()
        })
      },
      //移动改变工作项
      removeHandle(event) {
        let missionList,missionChangeType;
        if (event.to.id === '需求'){
          missionList = this.demand;
          this.$http.put('/mission/update',{
            missionId:missionList[event.newIndex].missionId,
            missionType:1
          }).then( res =>{
            this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
          })
        }else if (event.from.id === '缺陷'){
          missionList = this.defect;
          this.$http.put('/mission/update',{
            missionId:missionList[event.newIndex].missionId,
            missionType:2
          }).then( res =>{
            this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
          })
        }else {
          missionList = this.task;
          this.$http.put('/mission/update',{
            missionId:missionList[event.newIndex].missionId,
            missionType:3
          }).then( res =>{
            this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
          })
        }
      },
      //获取数据
      async getData() {
        await this.$http.get('/mission/show/list', {
          params: {
            missionType: 1,
            projectId: this.$route.query.projectId
          }
        }).then(res => {
          this.demand = res.data;
        });
        await this.$http.get('/mission/show/list', {
          params: {
            missionType: 2,
            projectId: this.$route.query.projectId
          }
        }).then(res => {
          this.defect = res.data;
        });
        await this.$http.get('/mission/show/list', {
          params: {
            missionType: 3,
            projectId: this.$route.query.projectId
          }
        }).then(res => {
          this.task = res.data;
        });
        this.list=this.defect.concat(this.demand);
        this.list =this.list.concat(this.task);
        this.list.forEach(item => {
          item.isDelect = false;
        });
        if (this.list.length === 0) {this.ifDelect=false}
        else {this.ifDelect=true;}
        console.log(this.list.length);
      }
    },
    mounted() {
      this.getData()
    }
  }

</script>

<style scoped>
    .drag-box {
        display: flex;
        user-select: none;
    }

    .drag-box-item {
        flex: 1;
        max-width: 430px;
        min-width: 300px;
        background-color: #eff1f5;
        margin-right: 16px;
        border-radius: 6px;
        border: 1px #e1e4e8 solid;
    }

    .item-title {
        padding: 8px 8px 8px 12px;
        font-size: 14px;
        line-height: 1.5;
        color: #24292e;
        font-weight: 600;
    }

    .item-ul {
        padding: 0 8px 8px;
        height: 500px;
        overflow-y: scroll;
    }

    .item-ul::-webkit-scrollbar {
        width: 0;
    }

    .drag-list {
        border: 1px #e1e4e8 solid;
        padding: 10px;
        margin: 5px 0 10px;
        list-style: none;
        background-color: #fff;
        border-radius: 6px;
        cursor: pointer;
        -webkit-transition: border .3s ease-in;
        transition: border .3s ease-in;
    }

    .drag-list:hover {
        border: 1px solid #20a0ff;
    }

    .drag-title {
        font-weight: 400;
        line-height: 25px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

    .ghost-style {
        display: block;
        color: transparent;
        border-style: dashed
    }
</style>
